<script lang="ts" setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();

const props = defineProps({
  product: {
    type: Object
  }
});

const getImg = (str:String, index:any) => {
  let arr = str.split(',')
  return arr[index];
};
const toRoute = () => {
  router.push({path: "/productDetail", query: {productId: props.product.productId}})
}
</script>

<template>
  <section class="homeModelOneUtil" @click="toRoute()">
    <div class="title">
      <div class="product-title"><span>{{props.product.productName2}}</span></div>
      <div class="desc"></div>
    </div>
    <div class="img-wrap">
      <div class="img-item" :style="{background: `#ccc url(${getImg(props.product.productIcon, 0)}) no-repeat center`}"></div>
      <div class="img-item" :style="{background: `#ccc url(${getImg(props.product.productIcon, 1)}) no-repeat center`}"></div>
    </div>
  </section>
</template>

<style lang="less" scoped>
.homeModelOneUtil {
  width: 1.86rem;
  min-height: 1.2rem;
  background: white;
  padding: .05rem;
  box-sizing: border-box;
  .title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: .1rem;
    .product-title {
      margin-bottom: .05rem;
      span {
        font-size: .2rem;
        &:before {
          display: inline-block;
          width: .24rem;
          height: .01rem;
          content: '';
          position: relative;
          background: #000;
          top: -.07rem;
          left: -.04rem;
        }
        &:after {
          display: inline-block;
          width: .24rem;
          height: .01rem;
          content: '';
          position: relative;
          background: #000;
          top: -.1rem;
          left: -.03rem;
        }
      }
      
    }
    .desc {
      font-size: .12rem;
      color: #648EFF;
      text-align: center;
    }
  }
  .img-wrap {
    height: .65rem;
    padding: 0 .15rem;
    display: flex;
    justify-content: space-between;
    .img-item {
      width: .65rem;
      height:.65rem;
      background-size: cover !important;
      border: none;
    }
  }
}
</style>

